<template>
  <div class="header-nav">
    <div class="header-nav-inner">
      <template v-for="(value, k) in navInfo">
        <!-- navbar左边 -->
        <div 
          class="nav-left" 
          v-if="k == 'left'" 
          :key="k"
          :class="currentPath == ('/home' || '/hot')? 'active' : ''"
          @mouseenter="showHot()"
          @mouseleave="hideHot()"
        >
         <router-link
            :to="item.path"
            v-for="item in value" 
            :key="item.text" 
            class="nav-left-item"
            >
            <span class="icon" v-show="item.icon">
              <i class="iconfont" :class="item.icon"></i>
            </span>
            <span class="text">
              {{item.text}}
            </span>
          </router-link>
          <sideNav v-show="isShowHot" :sideNavData="sideNavData" style="position:absolute; top:49px; left:0;"></sideNav>
        </div>
        <!-- navbar中间 -->
        <div 
          class="nav-center" 
          v-if="k == 'center'" 
          :key="k">
          <router-link 
            :to="item.path"
            v-for="item in value" 
            
            class="nav-center-item" 
            :key="item.text"
            >
            <span class="navicon" v-show="item.icon">
              <i class="iconfont" :class="item.icon"></i>
            </span>
            <span class="text">
              {{item.text}}
            </span>
          </router-link>
        </div>
        <!-- navbar右边 -->
        <div 
          class="nav-right" 
          v-if="k == 'right'" 
          :key="k">
          <router-link
            :to="item.path"
            v-for="item in value" 
            :key="item.text" 
            class="nav-right-item"
            >
            <span class="icon" v-show="item.icon">
              <i class="iconfont" :class="item.icon"></i>
            </span>
            <span class="text">
              {{item.text}}
            </span>
          </router-link>
          <div class="nav-right-item right last hover-style"
            @mouseenter="handleMouseEnter" 
            @mouseleave="handleMouseLeave"
          >
            <div class="content">
              <span class="navicon">
                <i class="iconfont iconnav_shoujigoucai"></i>
              </span>
              <span class="text">手机购彩</span>
              <div 
                class="qrcode" 
                v-show="showQrCode"
                @mouseover="handleQrFocus" 
                @mouseleave="handleQrBlur"
                >
                <qr-code></qr-code>
              </div>
            </div>
          </div>
        </div>
      </template>
    </div>
  </div>
</template>

<script>
import HeaderTop from '@/components/base/header-top/header-top'
import { mapMutations, mapGetters} from 'vuex'
import QrCode from '@/components/base/qr-code/qr-code'
import sideNav from '@/pages/home/components/side-nav/side-nav'
export default {
  components: {
    HeaderTop,
    QrCode,
    sideNav
  },
  props: {
    navInfo: {
      type: Object,
      require: true
    },
    sideNavData: {
      type: Object,
      require: true
    }
  },
  created() {
    this.currentPath = this.$route.path
  },
  data() {
    return {
      currentPath: '/home',
      showQrCode: false,
      isQrCodeFocused: false,
      isShowHot: false
    }
  },
  methods: {
    handleClick(id, path) {
      // 保存当前tab的id
      // this.setCurrentMainId(id)
    },
     handleMouseEnter() {
      this.showQrCode = true
    },
    handleMouseLeave() {
      this.showQrCode = this.isQrCodeFocused ? true : false
    },
    handleQrFocus() {
      this.isQrCodeFocused = true
    },
    handleQrBlur() {
      this.isQrCodeFocused = false
    },
    ...mapMutations('lottery', {
      setCurrentMainId: 'SET_MAIN_TAB_ID'
    }),
    showHot() {
      if(this.$route.path !== "/home")
      this.isShowHot = true
    },
    hideHot() {
      this.isShowHot = false
    }
  },
  computed: {
    ...mapGetters('lottery', ['getCurrentMainId'])
  },
}
</script>

<style lang="stylus">
  @import '~@/assets/styles/variables.styl'
  .header-nav
    width 100%
    height 48px
    background $color-theme-red
    border-bottom #fff6d6 1px solid
    .header-nav-inner
      width 1200px
      height 48px
      display flex
      margin 0 auto 
      .nav-left
        height 48px
        display flex
        align-items center
        position relative
        &.active 
          background rgba(194,19,19,1)
          box-shadow 0px -1px 0px 0px rgba(255,246,214,1)
        .nav-left-item
          box-sizing border-box
          padding 12px 10px
          width: 100%
          height 48px
          color:rgba(255,246,214,1)
          display flex 
          align-items center 
          // &:last-child 
          //   justify-content flex-end
          &.router-link-active
            background rgba(194,19,19,1)
            box-shadow 0px -1px 0px 0px rgba(255,246,214,1)
          .icon
            .iconfont
              font-size 24px
              display inline-block
              width 20px
              height 24px
              margin-right 10px
          .text
            font-size 15px
            font-weight 700
            vertical-align top
            display inline-block
      .nav-center
        display flex 
        // margin-left 10px
        .nav-center-item
          height 48px
          box-sizing border-box
          padding: 12px 16px
          color:rgba(255,246,214,1)
          display flex 
          aligin-items center
          &:first-child 
            width 130px
            justify-content flex-end
          &.router-link-active
            background rgba(194,19,19,1)
            box-shadow 0px -1px 0px 0px rgba(255,246,214,1)
          .navicon
            width 24px
            height 24px
            display inline-block
            .iconfont
              font-size 24px
          .text
            font-size 15px
            line-height 24px
            font-weight 700
            vertical-align top
            display inline-block
            margin-left 8px
      .nav-right
        flex 1
        display flex
        align-items center
        justify-content flex-end
        .nav-right-item
          box-sizing border-box
          padding 12px 10px
          border-left: 1px solid $color-divideline-header
          color rgba(255,246,214,1)
          &.router-link-active
            background rgba(194,19,19,1)
            box-shadow 0px -1px 0px 0px rgba(255,246,214,1)
          &.last 
            border-right 1px solid $color-divideline-header
            box-sizing border-box 
            height 48px 
            .content 
              justify-content space-around
              cursor pointer
              position relative 
              display flex 
              align-items center
              .navicon 
                margin-right 10px
                .iconfont 
                  font-size 24px
              .qrcode 
                position absolute 
                top 36px 
                right -10px
          .icon
            .iconfont
              font-size 24px
              display inline-block
              margin-left 10px
              margin-right 14px
              width 20px
              height 24px
          .text
            font-size 15px
            line-height 24px
            font-weight 700
            color:rgba(255,246,214,1)
            margin-right 14px
            vertical-align top
            display inline-block
      .nav-left-item:hover span,.nav-center-item:hover span,.nav-right-item:hover span
        transform scale(1.1) !important
        transition .1s
</style>